<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../node_modules/jquery-colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../node_modules/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>NoRewind with loaded image test</h1>
    <p>This test check whether the infinite scroll behaviour works when images are already loaded.</p>
    <p>If the test passes you should see every image twice, the first image is a bw food counter and the last image is
       of a heart necklace. If the test fails the second set of pictures will not show up, though they are still there
       and can be clicked on.</p>
    <div id="gallery">
        <a href="../photos/8083451788_552becfbc7_b.jpg" title="What's your destination?">
            <img src="../photos/8083451788_552becfbc7_m.jpg" width="240" height="198" />
        </a>
        <a href="../photos/7948632554_01f6ae6b6f_b.jpg" title="Just in a dream Place">
            <img src="../photos/7948632554_01f6ae6b6f_m.jpg" width="240" height="160" />
        </a>
        <a href="../photos/7302459122_19fa1d8223_b.jpg" title="Truthful Innocence">
            <img src="../photos/7302459122_19fa1d8223_m.jpg" width="240" height="160" />
        </a>
        <a href="../photos/7222046648_5bf70e893a_b.jpg" title="Simply my Brother">
            <img src="../photos/7222046648_5bf70e893a_m.jpg" width="240" height="125" />
        </a>
        <a href="../photos/7002395006_29fdc85f7a_b.jpg" title="Freedom">
            <img src="../photos/7002395006_29fdc85f7a_m.jpg" width="240" height="132" />
        </a>
        <a href="../photos/7062575651_b23918b11a_b.jpg" title="Maybe spring">
            <img src="../photos/7062575651_b23918b11a_m.jpg" width="240" height="132" />
        </a>
        <a href="../photos/6841267340_855273fd7e_b.jpg" title="Love">
            <img src="../photos/6841267340_855273fd7e_m.jpg" width="240" height="137" />
        </a>
    </div>
    
    <!-- bower:js -->
    <script src="../../node_modules/jquery/dist/jquery.js"></script>
    <script src="../../node_modules/jquery-colorbox/jquery.colorbox.js"></script>
    <script src="../../node_modules/swipebox/src/js/jquery.swipebox.min.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
    var $gallery = $("#gallery");
    // capture elements to add later, these are just a clone of the current elements
    var toAdd = $gallery[0].innerHTML;
    $gallery.justifiedGallery({
        waitThumbnailsLoad: false
    });

    // add more images that we know have already loaded
    $gallery.append(toAdd);
    // give the images a chance to load before we update the gallery
    setTimeout(function() {
        $gallery.justifiedGallery('norewind');
    }, 1000);
    </script>
</body>

</html>
